'use strict'
import React from "react";
import {render} from 'react-dom';
import {Link} from 'react-router';
//引入工具类
import MMALL_COM from 'util/comm.jsx';
import ORDER from 'service/order_service.jsx';

//引入依赖页面
import PageTitle  from 'page/component/page-title/index.jsx';
import Pagination from 'page/component/pagination/index.jsx';

import './detail.scss';

var _comm  = new MMALL_COM();
var _order = new ORDER();
class OrderList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            orderNo: this.props.params.orderNo,
            orderInfo:{
            }
        }
        //绑定this
    }
    componentDidMount(){
        this.getOrderDetail();
    }
    //获得订单详情
    getOrderDetail(orderNo){
        let orderNumber=orderNo||this.state.orderNo;
        if(orderNumber){
            _order.getOrderDetail(orderNumber).then(res=>{
                this.setState({
                    orderInfo:res
                });
            },msg=>{
                _comm.errorTip(msg)
            })
        }
        else{
            _comm.errorTip('出错了')
        }
    }
    //发货
    sendGoods(orderNo){
        let orderNumber=orderNo||this.state.orderNo;
        _order.sendGoods(orderNumber).then(res=>{
            _comm.successTip(res);
            this.getOrderDetail()
        },
        msg=>{
            _comm.errorTip(msg);
        })
    }
    //渲染页面
    render(){
        let productList     = this.state.orderInfo.orderItemVoList  || [],
            receiverInfo    = this.state.orderInfo.shippingVo       || {};
        return (
        <div id="page-wrapper">
            <PageTitle pageTitle="订单详情">

            </PageTitle>
            <div className="row">
                <div className="form-wrap col-lg-12">
                    <div className="form-horizontal">
                        <div className="form-group">
                            <label htmlFor="name" className="col-md-2 control-label">订单号：</label>
                            <div className="col-md-5">
                                <p type="text" className="form-control-static">{this.state.orderInfo.orderNo}</p>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="subtitle" className="col-md-2 control-label">创建时间：</label>
                            <div className="col-md-5">
                                <p type="text" className="form-control-static">{this.state.orderInfo.createTime}</p>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="subtitle" className="col-md-2 control-label">收件人：</label>
                            <div className="col-md-5">
                                <p type="text" className="form-control-static">
                                    {this.state.orderInfo.receiverName}，
                                    {receiverInfo.receiverProvince} 
                                    {receiverInfo.receiverCity}，
                                    {receiverInfo.receiverAddress}，
                                    {receiverInfo.receiverPhone}
                                </p>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="subtitle" className="col-md-2 control-label">订单状态：</label>
                            <div className="col-md-5">
                                <p type="text" className="form-control-static">
                                    {this.state.orderInfo.statusDesc}
                                    {
                                        this.state.orderInfo.status == 20 
                                            ? <a className="btn btn-sm btn-default btn-send-goods" onClick={this.sendGoods.bind(this,this.state.orderNo)}>立即发货</a>
                                            : null
                                    }   
                                    
                                </p>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="subtitle" className="col-md-2 control-label">支付方式：</label>
                            <div className="col-md-5">
                                <p type="text" className="form-control-static">{this.state.orderInfo.paymentTypeDesc}</p>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="subtitle" className="col-md-2 control-label">订单金额：</label>
                            <div className="col-md-5">
                                <p type="text" className="form-control-static">￥{this.state.orderInfo.payment}</p>
                            </div>
                        </div>
                        <div className="col-md-12">
                            <table className="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th width="15%">商品图片</th>
                                        <th width="40%">商品信息</th>
                                        <th width="15%">单价</th>
                                        <th width="15%">数量</th>
                                        <th width="15%">合计</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        productList.map((product, index) => {
                                            return (
                                                <tr key={index}>
                                                    <td>
                                                        <img className="p-img" src={this.state.orderInfo.imageHost + product.productImage} alt={product.productName}/>
                                                    </td>
                                                    <td>{product.productName}</td>
                                                    <td>￥{product.currentUnitPrice}</td>
                                                    <td>{product.quantity}</td>
                                                    <td>￥{product.totalPrice}</td>
                                                </tr>
                                            )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        );
    }
}
export default OrderList;
